<template>
  <div v-show="isShow == 2">
    <el-form ref="form" label-width="80px">
      <el-form-item label="SPU名称">
        <span>{{ spuName }}</span>
      </el-form-item>
      <el-form-item label="SKU名称">
        <el-input v-model="skuInfo.skuName" placeholder="SKU名称"></el-input>
      </el-form-item>
      <el-form-item label="价格(元)">
        <el-input v-model="skuInfo.price"></el-input>
      </el-form-item>
      <el-form-item label="重量(千克)">
        <el-input v-model="skuInfo.weight" placeholder="重量(千克)"></el-input>
      </el-form-item>
      <el-form-item label="规格描述">
        <el-input v-model="skuInfo.skuDesc" type="textarea" rows="4"></el-input>
      </el-form-item>
      <el-form-item label="平台属性">
        <el-form ref="form" :inline="true" label-width="80px">
          <el-form-item
            :label="it1.attrName"
            v-for="it1 in attrInfoList"
            :key="it1.id"
          >
            <el-select v-model="it1.choosedAttr" placeholder="请选择">
              <el-option
                v-for="it2 in it1.attrValueList"
                :key="it2.id"
                :label="it2.valueName"
                :value="`${it2.attrId}:${it2.id}`"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </el-form-item>
      <el-form-item label="销售属性">
        <el-form ref="form" :inline="true" label-width="80px">
          <el-form-item
            :label="it1.saleAttrName"
            v-for="it1 in saleAttr"
            :key="it1.id"
          >
            <el-select v-model="it1.choosedSaleAttr" placeholder="请选择">
              <el-option
                v-for="it2 in it1.spuSaleAttrValueList"
                :key="it2.id"
                :label="it2.saleAttrValueName"
                :value="`${it1.id}:${it2.id}`"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </el-form-item>
      <el-form-item label="图片列表">
        <el-table
          :data="imgList"
          border
          style="width: 100%"
          @selection-change="chooseTable"
        >
          <el-table-column prop="prop" type="selection" width="width">
          </el-table-column>
          <el-table-column prop="prop" label="图片" width="width">
            <template slot-scope="{ row }">
              <img :src="row.imgUrl" style="width: 100px" />
            </template>
          </el-table-column>
          <el-table-column prop="imgName" label="名称" width="width">
          </el-table-column>
          <el-table-column prop="prop" label="操作" width="width">
            <template slot-scope="{ row }">
              <el-button
                v-show="row.isDefault === 0"
                type="primary"
                size="small"
                @click="changeBtn(row)"
                >设置默认</el-button
              >
              <el-button v-show="row.isDefault !== 0" size="small"
                >默认</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="saveAddSku">保存</el-button>
        <el-button @click="cancel">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  name: "SkuForm",
  props: ["isShow", "category1Id", "category2Id", "category3Id"],
  data() {
    return {
      skuInfo: {
        // 第一类参数由父组件传递
        category3Id: 0,
        spuId: 0,
        tmId: 0,
        // 第二类，双向绑定获取
        price: 0,
        skuName: "",
        weight: "",
        skuDesc: "",
        // 第三类，业务
        // 默认图片
        skuDefaultImg: "",
        // sku平台属性列表
        skuAttrValueList: [
          // {
          //   attrId: 0,
          //   attrName: "string",
          //   valueName: "string",
          // },
        ],
        // 图片列表
        skuImageList: [
          // {
          //   imgName: "string",
          //   imgUrl: "string",
          // },
        ],
        // sku销售属性值列表
        skuSaleAttrValueList: [
          // {
          //   saleAttrValueId: 0,
          //   saleAttrValueName: "string",
          // },
        ],
      },
      // spu名称
      spuName: "",
      // 售卖属性
      saleAttr: [],
      // 图片信息
      imgList: [],
      // 平台属性
      attrInfoList: [],
    };
  },
  methods: {
    // 初始化skuform
    async initSkuForm({ id, spuName, tmId }) {
      this.spuName = spuName;
      this.skuInfo.spuId = id;
      this.skuInfo.tmId = tmId;
      this.skuInfo.category3Id = this.category3Id;
      // 获取售卖属性
      const res1 = await this.$API.spu.reqGetSaleAttr({ spuId: id });
      if (res1.code === 200) this.saleAttr = res1.data;
      // 获取图片
      const res2 = await this.$API.spu.reqGetImgList({ spuId: id });
      if (res2.code === 200) {
        // 整理图片数据，添加切换默认图片按钮的标识
        const list = res2.data;
        list.forEach((it) => {
          // 在向服务器提交数据时，图片数据需要有isDefault字段且值为0
          it.isDefault = 0;
        });
        this.imgList = list;
      }
      // 获取平台属性
      const res3 = await this.$API.spu.reqGetAttrInfoList({
        category1Id: this.category1Id,
        category2Id: this.category2Id,
        category3Id: this.category3Id,
      });
      if (res3.code === 200) this.attrInfoList = res3.data;
    },
    // 控制默认图片按钮的切换和保存默认图片字段
    changeBtn(row) {
      // 切换按钮
      row.isDefault = 1;
      // 排他
      this.imgList.forEach((it) => {
        if (it.id !== row.id) it.isDefault = 0;
      });
      // 将默认图片的路径保存
      this.skuInfo.skuDefaultImg = row.imgUrl;
    },
    // 图片表格选中或取消选中时触发
    chooseTable(list) {
      // 参数list是当前已经选中的图片数组
      this.skuInfo.skuImageList = list; //注意此时的数据并不满足服务器要求，字段名称有出入，需要后续处理（在保存时处理）
    },
    // 保存添加sku
    async saveAddSku() {
      // 整理数据
      const { attrInfoList, saleAttr } = this;
      // 平台属性数据
      attrInfoList.forEach((it) => {
        // 防止没有全部选择完毕，而缺少choosedAttr字段，导致split出错
        if (it.choosedAttr) {
          const [attrId, valueId] = it.choosedAttr.split(":");
          const current = { attrId, valueId };
          this.skuInfo.skuAttrValueList.push(current);
        }
      });
      // 售卖属性
      saleAttr.forEach((it) => {
        if (it.choosedSaleAttr) {
          const [saleAttrId, saleAttrValueId] = it.choosedSaleAttr.split(":");
          const current = { saleAttrId, saleAttrValueId };
          this.skuInfo.skuSaleAttrValueList.push(current);
        }
      });
      // 图片设置
      this.skuInfo.skuImageList = this.skuInfo.skuImageList.map((it) => {
        return {
          imgName: it.imgName,
          imgUrl: it.imgUrl,
          isDefault: it.isDefault,
          spuImgId: it.id,
        };
      });
      const res = await this.$API.spu.reqSaveAddSku(this.skuInfo);
      if (res.code === 200) {
        this.$message({ type: "success", message: "添加成功" });
        // 向父组件发送信息，修改页面
        this.$emit("changeIsShow", { isShow: 0 });
        // 重置数据，防止回显
        Object.assign(this._data, this.$options.data());
      }else this.$message.error('添加失败')
    },
    // 取消
    cancel() {
      // 向父组件发送信息，修改页面
      this.$emit("changeIsShow", { isShow: 0 });
      // 重置数据，防止回显
      Object.assign(this._data, this.$options.data());
    },
  },
};
</script>

<style>
</style>